<template>
    <div class="userInfoBottom">
        <div class="toFunc" @click="gotoChat">
            <SvgIcon name="message" width="1.8rem" height="1.8rem"></SvgIcon>
            <span>去聊天</span>
        </div>
        <div class="toFunc" @click="gotoChat">
            <SvgIcon name="audio-call" width="1.8rem" height="1.8rem"></SvgIcon>
            <span>语音通话</span>
        </div>
        <div class="toFunc" @click="gotoChat">
            <SvgIcon name="video-call" width="1.8rem" height="1.8rem"></SvgIcon>
            <span>视频通话</span>
        </div>
    </div>
</template>

<script setup lang="ts">
import { RouteRecordRaw, useRouter } from 'vue-router'
import useUserStore from '@/store/modules/user'
import useMessagesStore from '@/store/modules/messages'
import { reqSetChatStatus } from '@/api/messages'

const userStore = useUserStore()
const messagesStore = useMessagesStore()
//获取路由器对象
let $router = useRouter()

const gotoChat = async () => {
    const allRoutes = $router.getRoutes()
    const contactFriend = messagesStore.contactsFriend
    for (let i = 0; i < allRoutes.length; i++) {
        if (allRoutes[i].path === `/chat/friend/${contactFriend.userId}`) {
            $router.push(`/chat/friend/${contactFriend.userId}`)
            return
        }
    }
    const friendRoute: RouteRecordRaw = {
        path: `/chat/friend/${contactFriend.userId}`,
        component: () => import('@/views/friend/index.vue'),
        meta: {
            userId: contactFriend.userId, //好友id
            conversationId: contactFriend.conversation_id, //会话id
            username: contactFriend.username, //好友用户名
            title: contactFriend.realname, //菜单标题，即好友名称
            avatar: contactFriend.avatar, //头像
            hidden: false, //代表路由标题在菜单中是否隐藏
        },
    }
    await reqSetChatStatus({ conversation_id: contactFriend.conversation_id })
    userStore.menuRoutes[0].children![0].children!.push(friendRoute)
    $router.addRoute('ChatDefault', friendRoute)
    $router.push(`/chat/friend/${contactFriend.userId}`)
}
</script>

<style scoped lang="scss">
.userInfoBottom {
    width: 300px;
    @include flex-layout(flex, center, space-around);

    .toFunc {
        width: 80px;
        height: 60px;
        @include flex-layout(flex, center, center, nowrap, column);

        &:hover {
            background-color: $base-menu-background;
            cursor: pointer;
        }

        span {
            font-size: 12px;
        }
    }
}
</style>
